<template>
	<path v-bind="bind"></path>
</template>

<script>
	// eslint-disable-next-line no-unused-vars
	/* global gsap */
	/**
	 * @author 唐国雄
	 * 绘制svg的path
	 * 依赖gasp核心和MotionPathPlugin
	 * 方法----------------------
	 * to(drawSVG,config)
	 * from(drawSVG,config)
	 * fromTo(drawSVG1,drawSVG2,config)
	 */
	/**
	 * 画线描述
	 * '20% 80%'	2个值,第1个表示开始位置,第二个表示结束位置
	 * '100%'		1个值,第一个值默认为0
	 * 值既可以是百分比也可以是数值
	 * @typedef DrawSVG
	 * @property {String} 值
	 */
	export default{
		name:'DrawPath',
		data(){
			return {
				length:0,
				start:0,
				end:0
			};
		},
		mounted(){
			this.end=this.length=Math.ceil(this.$el.getTotalLength());
		},
		computed:{
			bind(){
				const start=this.start;
				const len=this.end-start;
				return {
					'stroke-dasharray':len+' '+(this.length-len),
					'stroke-dashoffset':-start+''
				};
			}
		},
		methods:{
			$_bear_convert(str){
				if(str.endsWith('%')){
					str=parseFloat(str)*this.length/100;
				}else{
					str=parseFloat(str);
				}
				return Math.round(str);
			},
			$_bear_startEnd(drawSVG){
				let [start,end]=drawSVG.split(' ');
				if(!end){
					end=start;
					start='0';
				}
				return {
					start:this.$_bear_convert(start),
					end:this.$_bear_convert(end)
				};
			},
			/**
			 * gsap.to
			 * @param {DrawSVG} drawSVG 结束时的值
			 * @param {*} config gsap的配置
			 * @return {gsap.core.Tween}
			 */
			to(drawSVG,config){
				return gsap.to(this,
					Object.assign(this.$_bear_startEnd(drawSVG),{snap:'start,end'},config));
			},
			/**
			 * gsap.from
			 * @param {DrawSVG} drawSVG 开始时的值
			 * @param {*} config gsap的配置
			 * @return {gsap.core.Tween}
			 */
			from(drawSVG,config){
				return gsap.from(this,
					Object.assign(this.$_bear_startEnd(drawSVG),{snap:'start,end'},config));
			},
			/**
			 * gsap.fromTo
			 * @param {DrawSVG} drawSVG1 开始时的值
			 * @param {DrawSVG} drawSVG2 结束时的值
			 * @param {*} config gsap的配置
			 * @return {gsap.core.Tween}
			 */
			fromTo(drawSVG1,drawSVG2,config){
				return gsap.fromTo(this,
					this.$_bear_startEnd(drawSVG1),
					Object.assign(this.$_bear_startEnd(drawSVG2),{snap:'start,end'},config));
			}
		}
	};
</script>

<style lang="scss">

</style>
